/* mixins */
@import "src/mixins.scss";

// @include DEBUG();
@include useFontSmoothingOnMacOS();
/* wrapper 公共背景 */
.wrapper-bg {
  /* ... */
}

.container {
  width: 100%;
  padding-top: 0.08rem;
  box-sizing: border-box;
  @include flex_dis();
  @include flex(flex-direction, column);
  @include flex(align-items, center);
  position: relative;
  z-index: 1;
  background: linear-gradient(
    to bottom,
    transparent 0.4rem,
    #131428 0.4rem
  ); /* 避免超出底图背景 */

  .container-wrapper {
    width: 100%;
    box-sizing: border-box;
  }

  /* header */
  .container-header {
    width: 100%;
    padding: 0.38rem 0 0.46rem;
    box-sizing: border-box;
    overflow: hidden;
    margin-bottom: 0.2rem;
    /* 标题图 */
    .container-header__title {
      display: block;
      width: 4.74rem;
      height: 0.74rem;
      margin: 0 auto 0;
    }
    /* 规则介绍 */
    .container-header__rule {
      width: 6.46rem;
      margin: 0 auto;
      font-size: 0.24rem;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #d0d2f9;
      line-height: 0.34rem;

      .emphasize {
        color: #feeebd;
      }
    }
  }
  /* main */
  .container-main {
    overflow: hidden;
    /* 倒计时 */
    .container-main__countdown {
      margin-top: 0.44rem;
      @include flex_dis();
      @include flex(flex-direction, column);
      @include flex(align-items, center);
      .countdown-title {
        width: 4.54rem;
        height: 0.56rem;
        background-size: 100% 100%;
      }
      .countdown-main {
        @include flex_dis();
        @include flex(align-items, center);
        @include flex(justify-content, center);
        margin-top: -0.1rem;
        .countdown-main--block {
          width: 0.68rem;
          height: 0.72rem;
          background-size: 100% 100%;
          text-align: center;
          background-position: center;
          font-size: 0.26rem;
          font-family: PingFangSC-Semibold, PingFang SC;
          font-weight: 600;
          color: #4132ac;
          line-height: 0.72rem;
        }
        .countdown-main--block + .countdown-main--block {
          margin-left: -0.1rem;
        }
        .countdown-main--unit {
          font-size: 0.22rem;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #e0f0ff;
          line-height: 0.32rem;
          margin: 0 0.1rem;
        }
      }
      .countdown-footer {
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #9597bd;
        line-height: 0.28rem;
        @include useFontSizeLT12(0.2);
      }
    }
    /* 安全区 */
    .container-main__area {
      width: 6.3rem;
      height: 0.58rem;
      background-size: 100% 100%;
    }
    .container-main__area.area-1 {
      margin: 0.3rem auto 0.04rem;
    }
    .container-main__area.area-2 {
      margin: 0.2rem auto 0.14rem;
    }
    .container-main__area.area-3 {
      margin: 0.2rem auto 0.16rem;
    }

    /* 分割线 */
    .container-main__divider {
      width: 6.4rem;
      height: 0.25rem;
      background-size: 100% 100%;
      background-position: center;
      margin: 0.16rem auto 0.04rem;
    }
    /* 活动已结束 */
    .container-main__end {
      width: 2.74rem;
      height: 0.56rem;
      line-height: 0.56rem;
      background-size: 100% 100%;
      background-position: 0 0;
      text-align: center;
      font-size: 0.24rem;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #b3afc9;
      margin: 0.6rem auto 0;
    }
    /* TOP3 */
    .container-main__top3 {
      width: 6.88rem;
      height: 4.68rem;
      background-position: bottom;
      background-size: 100% auto;
      box-sizing: border-box;
      margin: 0 auto;
      @include flex_dis();
      @include flex(justify-content, space-around);
      .top3-1 {
        order: 2;
        margin-top: 0.04rem;

        .top3--avatar {
          width: 2rem;
          height: 2.28rem;
          margin-bottom: 0.1rem;
        }
      }
      .top3-2 {
        order: 1;
        margin-top: 0.42rem;
        .top3--avatar {
          width: 1.76rem;
          height: 1.92rem;
          margin-bottom: 0.12rem;
        }
      }
      .top3-3 {
        order: 3;
        margin-top: 0.58rem;
        .top3--avatar {
          width: 1.76rem;
          height: 1.92rem;
          margin-bottom: 0.12rem;
        }
      }

      .top3--avatar {
        // border-radius: 50%;
        background-size: 100% auto;
        background-position: bottom; /* bottom */
        @include flex_dis();
        @include flex(align-items, flex-end);
        overflow: hidden;
        padding: 0.16rem; /* 头像框厚度 */
        box-sizing: border-box;
        position: relative;

        img {
          display: block;
          width: 100%;
          aspect-ratio: 1;
          object-fit: cover;
          margin: 0 auto;
          border-radius: 50%;
        }

        &__live {
          position: absolute;
          bottom: 0.16rem;
          left: 0;
        }
      }
      .top3--nickname {
        font-size: 0.26rem;
        font-family: PingFangSC-Semibold, PingFang SC;
        font-weight: 600;
        color: #ffffff;
        line-height: 0.36rem;
        text-align: center;
      }
      .top3--value {
        font-size: 0.24rem;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #ffee9e;
        line-height: 0.34rem;
        text-align: center;
      }
      .top3--gap {
        font-size: 0.24rem;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #ffffff;
        line-height: 0.34rem;
        text-align: center;

        /* 结算显示 */
        &.result {
          color: #80fff3;
        }
      }
      .top3--tag {
        margin-top: 0.08rem;
        img {
          display: block;
          margin: 0 auto;
          width: 0.6rem;
          height: 0.32rem;
        }
      }
    }
    /* OTHERS */
    .container-main__others {
      width: 6.98rem;
      margin: 0 auto;

      /* GRID */
      @at-root .others-header,
        .others-main__item {
        display: grid;
        grid-template-columns: 23% 47% 30%;
        grid-template-rows: 1fr;
        gap: 0px 0px;
        grid-template-areas: "index detail value";
        justify-items: center;
        align-items: center;
        .index {
          grid-area: index;
        }
        .value {
          grid-area: value;
        }
        .detail {
          grid-area: detail;
        }
      }
      .others-header > div {
        margin-top: 0.08rem;
      }

      @at-root .others-main__item .detail {
        justify-self: start; /* 居左对齐 */
      }

      .others-header {
        width: 100%;
        padding: 0 0.2rem; // padding: 0.1rem;
        box-sizing: border-box;
        height: 0.68rem;
        background-size: 100%;
        background-position: 0 0;
        font-size: 0.2rem;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #989ac4;
      }
      .others-main {
        width: 100%;
        position: relative;
        background-size: 100% 100%;
        z-index: 2; /* layout:above footer */
        @at-root .others-main__item {
          width: 100%;
          height: 1.38rem;
          padding: 0 0.2rem;
          box-sizing: border-box;
          background-size: 100%;
          margin-bottom: 0.04rem;
          .index,
          .value {
            font-size: 0.28rem;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #ffee85;
            line-height: 0.4rem;
          }
          .detail {
            @include flex_dis();
            @include flex(align-items, center);
            .detail-avatar {
              position: relative;
              &__main {
                width: 0.88rem;
                height: 0.88rem;
                border-radius: 50%;
                border: 0.02rem solid #ffe7ba;
                margin-right: 0.12rem;
              }
              &__live {
                position: absolute;
                left: 0;
                bottom: 0;
                width: 0.88rem;
                height: 0.88rem;
                border-radius: 50%;
              }
            }
            .detail-info {
              .detail-info--name {
                font-size: 0.24rem;
                font-family: PingFangSC-Medium, PingFang SC;
                font-weight: 500;
                color: #ffffff;
                line-height: 0.34rem;
                margin-bottom: 0.06rem;
                /* 昵称超出省略 */
                @include useEllipsis();
              }
              .detail-info--gap {
                font-size: 0.2rem;
                @include useFontSizeLT12(0.2, left);
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #fefbe1;
                line-height: 0.28rem;
                white-space: nowrap;
              }
            }
          }
        }
        .others-main__spinner {
          padding: 0.22rem 0 0.4rem;
          @include flex_dis();
          @include flex(justify-content, center);

          .spinner-content {
            height: 0.4rem;
            font-size: 0.28rem;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #ffee85;
            line-height: 0.4rem;
            text-align: center;
            vertical-align: bottom;
          }
        }
      }
      .others-footer {
        width: 100%;
        height: 0.58rem;
        background-size: 100%;
        background-position: bottom;
        margin-top: -0.22rem;
      }
    }
  }
  /* footer */
  .container-footer {
    width: 100%;
    height: 1.62rem;
    background-size: 100%;
    background-position: bottom;
    text-align: center;
    font-size: 0.2rem;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #7e7e86;
    line-height: 0.28rem;
    padding-top: 0.22rem;
    box-sizing: border-box;

    > p {
      @include useFontSizeLT12(0.2);
    }
    > p:not(:last-of-type) {
      margin-bottom: 0.06rem;
    }
  }
}

.container.fixed-anchor {
  padding-bottom: 1.38rem;
  & .container-footer + .others-main__item {
    margin-bottom: 0;
    position: fixed;
    bottom: 0;
    z-index: 2;
  }
}
